<template>
  <div id="app-container" class="w-screen h-screen relative bg-[#dee1e6] flex">
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script lang="ts">
export default {
  name: "App",
};
</script>

<script lang="ts" setup>
// 兼容 element-plus 的多语言
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

import { computed } from "vue";
import { useI18n } from "vue-i18n";

import useSystemStore from "@/pinia/system";
const SystemStore = useSystemStore();
SystemStore.initFont();
SystemStore.initSize();

// 声明语言类型
interface LangType {
  "zh-cn": string;
  en: string;
}

// 获取 i18n 实例
const i18n = useI18n();

// 缓存语言包，供 el-config-provider 组件使用
const locale = computed(() => {
  const langObj = {
    "zh-cn": zhCn,
    en,
  };

  const lang = i18n.locale.value as keyof LangType;
  return langObj[lang || "zh-cn"];
});
</script>
